<template>
  <div class="login">
    <!-- 头部图片 -->
    <div>
      <img class="topImg" src="../../assets/image/login/login.png" alt="" />
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit" class="mt-40">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
      </van-cell-group>
      <div class="bottomButton">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";

// 登录信息
const username = ref("");
const password = ref("");

// pinia store
const userStore = useUserStore();
// router
const router = useRouter();

const onSubmit = async (values) => {
 
  await userStore.login(values);
  if(userStore.token){
    router.push('/home')
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  // 头部图片
  .topImg {
    width: 100%;
    height: 140px;
  }
}
.van-field {
  margin-top: 10px;
}
</style>